<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/sketch.min.js"></script>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      .no-event{
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <script>
      function CloseMouseEffects() {
        window.testDemo.mousemove = function() {};
      }

      function OpenMouseEffects() {
        window.testDemo.mousemove = function() {
          var particle, theta, force, touch, max, i, j, n;

          for (i = 0, n = window.testDemo.touches.length; i < n; i++) {
            (touch = window.testDemo.touches[i]), (max = random(1, 4));

            for (j = 0; j < max; j++) {
              window.testDemo.spawn(touch.x, touch.y);
            }
          }
        };
      }
    </script>
    <script>
      // ----------------------------------------

      // Particle

      // ----------------------------------------

      function Particle(x, y, radius) {
        this.init(x, y, radius);
      }

      Particle.prototype = {
        init: function(x, y, radius) {
          this.alive = true;

          this.radius = radius || 10;

          this.wander = 0.15;

          this.theta = random(TWO_PI);

          this.drag = 0.92;

          this.color = "#fff";

          this.x = x || 0.0;

          this.y = y || 0.0;

          this.vx = 0.0;

          this.vy = 0.0;
        },

        move: function() {
          this.x += this.vx;

          this.y += this.vy;

          this.vx *= this.drag;

          this.vy *= this.drag;

          this.theta += random(-0.5, 0.5) * this.wander;

          this.vx += sin(this.theta) * 0.1;

          this.vy += cos(this.theta) * 0.1;

          this.radius *= 0.96;

          this.alive = this.radius > 0.5;
        },

        draw: function(ctx) {
          ctx.beginPath();

          ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);

          ctx.fillStyle = this.color;

          ctx.fill();
        },
      };

      // ----------------------------------------

      // Example

      // ----------------------------------------

      var MAX_PARTICLES = 280;

      var COLOURS = [
        "#69D2E7",
        "#A7DBD8",
        "#E0E4CC",
        "#F38630",
        "#FA6900",

        "#FF4E50",
        "#F9D423",
      ];

      var particles = [];

      var pool = [];

      var demo=null

      window.onload = function() {
        var demo = Sketch.create({
          container: document.getElementById("test"),
        });
        demo.setup = function() {
          // Set off some initial particles.

          var i, x, y;

          //  for ( i = 0; i < 20; i++ ) {

          x = demo.width * 0.5 + random(-100, 100);

          y = demo.height * 0.5 + random(-100, 100);

          demo.spawn(0, 999);

          // }
        };

        demo.spawn = function(x, y) {
          if (particles.length >= MAX_PARTICLES) pool.push(particles.shift());

          particle = pool.length ? pool.pop() : new Particle();

          particle.init(x, y, random(5, 40));

          particle.wander = random(0.5, 2.0);

          particle.color = random(COLOURS);

          particle.drag = random(0.9, 0.99);

          theta = random(TWO_PI);

          force = random(2, 8);

          particle.vx = sin(theta) * force;

          particle.vy = cos(theta) * force;

          particles.push(particle);
        };

        demo.update = function() {
          var i, particle;

          for (i = particles.length - 1; i >= 0; i--) {
            particle = particles[i];

            if (particle.alive) particle.move();
            else pool.push(particles.splice(i, 1)[0]);
          }
        };

        demo.draw = function() {
          demo.globalCompositeOperation = "lighter";

          for (var i = particles.length - 1; i >= 0; i--) {
            particles[i].draw(demo);
          }
        };

        demo.mousemove = function() {
          var particle, theta, force, touch, max, i, j, n;

          for (i = 0, n = demo.touches.length; i < n; i++) {
            (touch = demo.touches[i]), (max = random(1, 4));

            for (j = 0; j < max; j++) {
              demo.spawn(touch.x, touch.y);
            }
          }
        };
        window.testDemo=demo
        CloseMouseEffects()
        document.getElementById("test").setAttribute('class','no-event')
      };
    </script>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="test" style="position: fixed; top: 0px; z-index: 20"></div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
